<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>login</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
    <style>
        body{
            background-image: url("/static/images/beijing.jpg");
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        .loginForm{
            width: 350px;
            height: 240px;
            background-color: white;
            padding: 30px 20px;
            margin-top: 50%;
            border-radius: 5px;
            box-shadow: 0 0 5px black;
            box-sizing: border-box;
        }
	.btn_login{
		width:100%
	}
	.txt_input{
	    border:1px solid #BEBEBE
	}
	.icon{
	    padding-top:10px;
	    padding-left:10px
	}
	.t_input{
	    border:none
	}
	.title{
		height:50px
	}
    </style>
</head>
<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md4 layui-col-md-offset4">
                <div class="loginForm">
                   <div  class="title"> <h2 align="center">博客登录</h2></div>
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-row txt_input"  >
                                <div class="layui-col-md1 icon" > <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="nickname"></label></div>
                                <div class="layui-col-md11">
                                    <input type="text" id="nickname" name="nickname" required lay-verify="nickname" placeholder="请输入手机号" class="layui-input t_input">
                                </div>
		                    </div>
                        </div>

 		                <div class="layui-form-item">
                            <div class="layui-row txt_input"  >
                                <div class="layui-col-md1 icon" > <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label></div>
                                <div class="layui-col-md11">
                                    <input type="password" id="password" name="password" required lay-verify="password" placeholder="请输入密码" class="layui-input t_input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item" align="center">
                            <div class="layui-form-block">
                                <button id="loginBtn" type="button"  class="layui-btn btn_login" lay-submit >登录</button>
                            </div>
                        </div>
                        <div><a href="/register.html"> 没有账号?</a></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
    <script>
        layui.use(['form', 'jquery'],function (){
            var form = layui.form;
            var $ = layui.jquery;
            var validatePwd =false;
            var validateNik =false;
            form.verify({
                nickname: function (value){
                    if(value == "") return "手机号不能为空";
                    else if(!/^1[3-9]\d{9}$/.test(value)) return "手机号格式不正确";
                    else validateNik = true;
                },
                password: function (value){
                    if(value == "") return "密码不能为空";
                    else if(!/^[\S]{6,12}$/.test(value)) return "密码必须6-12位之间,且不能有空格";
                    else validatePwd = true;
                },

            })
            form.on("submit",function (){
                if(validatePwd && validateNik){
                    let nickname = $("#nickname").val();
                    let password = $("#password").val();
                    $.ajax({
                        url: "/login.html",
                        data: {nickname: nickname, password: password},
                        dataType: "json",
                        method: "post",
                        success: function (data) {
                            if (data.msg == "ok") {
                                location.href = "/index.html";
                                return;
                            } else {
                                alert("登录失败!")
                                location.href = "/login.html";
                                return;
                            }
                        }
                    })
                }
            })
        })



    </script>
</body>
</html>
